<template>
  <div class="dashboard-container">
      <div class="app-container">
        <el-card shadow="never">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <el-form-item label="关键词">
                  <el-input v-model="form.keyword" placeholder="根据关键词搜索"></el-input>
                </el-form-item></el-col>
              <el-col :span="6">
                <el-form-item style="text-align: right;">
                  <el-button @click="clear">清除</el-button>
                  <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-alert  type="info" show-icon :closable="false">数据一共{{ count }}条</el-alert>
          <el-table :data="list" style="width: 100%">
                <el-table-column
                  prop="id"
                  label="编号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="questionType"
                  label="题型"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="questionIDs"
                  label="题目编号" width="200">
                  <template #default="{ row }">
                  <div class="actions" v-for="(item,index) in row.questionIDs" :key="index">
                    <el-button type="text" @click="previewQue(item.id)">{{  item.number +'\n' }}</el-button>
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                  prop="addTime"
                  label="录入时间" width="180">
                </el-table-column>
                <el-table-column
                  prop="totalSeconds"
                  label="答题时间(s)">
                </el-table-column>
                <el-table-column
                  prop="accuracyRate"
                  label="正确率(%)">
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="录入人">
                </el-table-column>
                <el-table-column  label="操作">
                  <template #default="{ row }">
                  <el-button type="danger" icon="el-icon-delete" circle @click="open(row.id)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="current"
                  :page-sizes="[20, 30, 50, 100]"
                  :page-size="pageSize"
                  @size-change="handlepageSizeChange"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="count">
                </el-pagination>
              </div>
        </el-card>
                   <el-dialog
                 title="题目预览"
                 :visible="dialogVisible"
                 width="50%"
                 :before-close="handleClose"
               >
                 <el-row type="flex" class="row-bg" justify="space-between">
                   <el-col :span="6">
                     <span v-if="newTable.questionType === '1'">【题型】:单选</span>
                     <span v-else-if="newTable.questionType === '2'">【题型】:多选</span>
                     <span v-else>【题型】:简答</span>
                   </el-col>
                   <el-col :span="6">
                     <span>【编号】:{{ newTable.id }}</span>
                   </el-col>
                   <el-col :span="6">
                     <span v-if="newTable.difficulty === '1'">【难度】:简单</span>
                     <span v-else-if="newTable.questionType === '2'">【难度】:一般</span>
                     <span v-else>【难度】:困难</span>
                   </el-col>
                   <el-col :span="6">
                     <span>【标签】:{{ newTable.tags }}</span>
                   </el-col>
                 </el-row>
                 <el-row class="row-bg">
                   <el-col :span="6">
                     <span>【学科】:{{ dialogItemObj.subjectName }}</span>
                   </el-col>
                   <el-col :span="6">
                     <span>【目录】:{{ dialogItemObj.directoryName }}</span>
                   </el-col>
                   <el-col :span="6">
                     <span>【方向】:{{ dialogItemObj.direction }}</span>
                   </el-col>
                 </el-row>
                 <hr />
                 <span>【题干】:</span>
                 <p style="color: blue">{{ clearHTMLTag(dialogItemObj.question) }}</p>
                 <p v-if="dialogItemObj.questionType !== '3'">
                   选项:(以下选中的选项为正确答案)
                 </p>
                 <div v-if="dialogItemObj.questionType === '1'">
                   <el-row v-for="item in dialogItemObj.options" :key="item.id">
                     <el-col :span="6">
                     <el-radio-group :value="radio">
                       <el-radio :label="item.isRight">{{ item.title }}</el-radio>
                     </el-radio-group>
                   </el-col>
                   </el-row>
                 </div>
                 <div v-else-if="dialogItemObj.questionType === '2'">
                   <el-row
                     v-for="item in dialogItemObj.options"
                     :key="item.id"
                     :span="6"
                     class="row-bg"
                   >
                     <el-col>
                       <el-checkbox
                         onClick="javascript:return false"
                         v-model="item.isRight"
                         :true-label="1"
                         :false-label="0"
                         >{{ item.title }}</el-checkbox
                       >
                     </el-col>
                   </el-row>
                 </div>
                 <hr />
                 <span>【参考答案】:</span>
                 <el-button @click="isShow = !isShow" type="danger" v-model="isShow"
                   >视频答案预览</el-button
                 >
                 <div v-if="isShow">
                   <video width="320" height="240" controls autoplay>
                     <source src="movie.mp4" type="video/mp4" />
                     <source src="movie.ogg" type="video/ogg" />
                     <source src="movie.webm" type="video/webm" />
                     您的浏览器不支持 video 属性。
                   </video>
                 </div>
                 <hr />
                 <el-row class="row-bg" style="margin-top: 20px">
                   <el-col>
                     <span>【答案解析】:{{ clearHTMLTag(dialogItemObj.answer) }}</span>
                   </el-col>
                 </el-row>
                 <hr />
                 <span>【题目备注】:{{ dialogItemObj.remarks }}</span>
                 <span slot="footer" class="dialog-footer">
                   <el-button type="primary" @click="dialogVisible = false"
                     >关闭</el-button
                   >
                 </span>
               </el-dialog>
      </div>
    </div>
  </template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      form: {
        keyword: ''
      },
      list: [],
      count: 0,
      currentPage: 9,
      current: 1,
      pageSize: 20,
      dialogVisible: false,
      newTable: {},
      dialogItemObj: {},
      isShow: false,
      radio: 1

    }
  },
  created () {
    this.getRandoms()
  },
  methods: {
    async previewQue (id) {
      this.dialogVisible = true
      const res = await detail({ id })
      this.newTable = res.data
      this.dialogItemObj = res.data
    },
    clear () {
      this.form.keyword = ''
      this.getRandoms()
    },
    checkConstants () {
      this.list.forEach(item => {
        questionType.forEach(ele => {
          if (ele.value === Number(item.questionType)) {
            item.questionType = ele.label
          }
        })
      })
    },
    async getRandoms () {
      const res = await randoms({ page: this.current, pagesize: this.pageSize, keyword: this.form.keyword })
      this.list = res.data.items
      this.checkConstants()
      this.count = res.data.counts
    },
    handleCurrentChange (value) {
      this.current = value
      this.getRandoms()
    },
    handlepageSizeChange (value) {
      this.pageSize = value
      this.getRandoms()
    },
    search () {
      if (!this.form) return
      this.getRandoms()
    },
    async remove (id) {
      await removeRandoms(id)
      if (this.list.length === 1 && this.current > 1) {
        this.current--
      }
      // 重新渲染
      this.getRandoms()
    },
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleClose () {
      this.$confirm('确认关闭？')
        .then(() => {
          this.formDetail = { title: '', articleBody: '', videoURL: '' }
          this.closeDrawer()
          this.isShowDrawer = false
        })
        .catch(() => {})
    },
    clearHTMLTag (str) {
      if (str) {
        return str.replace(/<[^>]+>/g, '')
      }
    },
    closeDrawer () {
      this.newTable = {}
      this.dialogItemObj = {}
      this.dialogVisible = false
    }
  }
}
</script>

  <style scoped lang="scss">
  .actions{
    line-height: 1;
    height: 22px;
  }
  </style>
